<template>
  <div>
    <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
    <div class="head">
      <van-search background="#ff6040" placeholder="请输入搜索关键词" />

      <div class="sortbox">
        <div class="sort">
          <div>综合排序</div>
          <div>销量</div>
          <div>
            <span>价格</span>
          </div>
          <img src="../../assets/img/icon/sort.png" />
          <div>好评度</div>
          <div>店铺</div>
        </div>
        <div class="filter">
          <img src="../../assets/img/icon/filter.png" />
          <span>筛选</span>
        </div>
      </div>
    </div>
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="true"
        indicator-color="#FFFBE8"
      >
        <van-swipe-item>筛选11.11大促销商品，亲，请速速赶来</van-swipe-item>
        <van-swipe-item>筛选11.11大促销商品，亲，请速速赶来</van-swipe-item>
        <van-swipe-item>筛选11.11大促销商品，亲，请速速赶来</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-pull-refresh v-model="finished" @refresh="onRefresh">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item in goodlistc"
          :price="item.price"
          :title="item.goodsname"
          :thumb="`http://localhost:3000${item.img}`"
          :origin-price="item.market_price"
          @click="goodsinfoadd(item.id)"
        />
      </van-list>
      <!-- </van-pull-refresh> -->
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      cateid: "",
      page: 1,
      size: 6,
      type: "",
      goodlistc: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  created() {},
  mounted() {
    this.cateid = this.$route.query.cateid;
    this.type = this.$route.query.type;
    this.goodlists();
  },
  methods: {
    goodlists() {
      let { cateid, type, page, size } = this;
      this.$api.Retgoodlist({ cateid, page, size, type }).then((res) => {
        console.log(res);
        // this.goodlistc = res.data.list.goodData;
        // console.log(this.goodlistc);
        if (res.data.list.goodData == null || res.data.listtotalPage == 1) {
          this.finished = true;
        }
        this.goodlistc = this.goodlistc.concat(
          res.data.list.goodData == null ? [] : res.data.list.goodData
        );
        console.log(this.goodlistc);
        this.loading = false;
        this.refreshing = false;
      });
    },
    goodsinfoadd(id) {
      this.$router.push("/goodsinfo?id=" + id);
    },
    async onRefresh() {
      await this.$utils.delay(1000);
      this.finished = false;
      this.page = 1;
      this.goodlistc = [];
      this.goodlists();
    },
    async onLoad() {
      await this.$utils.delay(1000);
      ++this.page;
      this.goodlists();
    },
  },
};
</script>
<style scoped lang="scss">
.head {
  color: white;
  width: 100%;
  height: 100px;
  background: linear-gradient(#ff6040, #ff8a80);
  text-align: center;
  line-height: 50px;
  margin-top: 40px;
  .sortbox {
    display: flex;
    font-size: 20px;
    flex: 1;
  }
  .sort {
    display: flex;
    font-size: 10px;
    justify-content: space-around;
    width: 80%;
    overflow: hidden;
    img {
      width: 20px;
      height: 20px;
      margin-top: 15px;
      margin-left: -30px;
    }
  }
  .filter {
    display: flex;
    font-size: 10px;
    width: 15%;
    justify-content: space-around;
    img {
      width: 20px;
      height: 20px;
      margin-top: 15px;
    }
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
